{% extends "templates/panoptic_base.html" %}

{% block meta_block %}
{% include "templates/includes/meta_block.html" %}
{% endblock %}

{% block script %}
<script>
	window.state_wise_frt = {{ state_wise_frt }};
	window.state_routes = {{ state_routes }};
	window.current_state = "{{ state_id or '' }}";
	document.addEventListener('DOMContentLoaded', () => {
		let current_view = "Map"
		let toggle_button = document.getElementById("view-states-list");
		let map = document.getElementById("chartdiv");
		let state = document.getElementById("state-list");
		toggle_button.onclick = () => {
			if (current_view == "Map") {
				// Hide Map
				map.classList.add("hidden");

				// Show States
				state.classList.remove("hidden");
				current_view = "State";
				toggle_button.innerHTML = "View Map";
			} else if (current_view == "State") {
				// Hide States
				state.classList.add("hidden");

				// Show Map
				map.classList.remove("hidden");
				toggle_button.innerHTML = "View States List";
				current_view = "Map";
			}
		};
	})
</script>
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/data/countries2.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/material.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<script src="/assets/panoptic/js/india_map.js?ver=2"></script>
{% endblock %}

{% block content %}
<section class="container border-b">
	{{ web_block(
		"Title Section",
		values={
			"title": section_title,
			"button_label": button_label,
			"button_id": button_id,
		},
	add_container=0,
	add_top_padding=0,
	add_bottom_padding=0,
	) }}
	<div class="flex flex-wrap">
		<div class="w-full md:w-2/3 border-r border-l border-b md:border-b-0">
			<div id="chartdiv" class="h-full block" style="min-height: 400px;"></div>
			<div id="state-list" class="flex flex-wrap hidden">
				{% for state, route in state_name_routes.items() %}
				<a href="/{{route}}" class="hover:bg-teal-blue-600 w-full md:w-1/3 flex items-center border-r border-b">
					<div class="m-6 truncate">
						{{ state }}
					</div>
				</a>
				{% endfor %}
			</div>
		</div>
		<div class="w-full md:w-1/3 border-r flex flex-col justify-between">
			{% if frts|length %}
			{{ web_block(
				"Stats Column",
				values={
					"stats": {
						"FRT Systems Installed": total_frt,
						"In Active Utilization": total_frt_in_use,
						"Total Financial Outlay</p><p class='text-sm text-teal-blue-300'>* Estimates based on available information</p>": total_cost
					}
				},
				add_container=0,
				add_top_padding=0,
				add_bottom_padding=0,
			) }}
			<div class="px-8 py-5 bg-panoptic-blue-500 hidden lg:block">
				<h2 class="text-white">
					Facial Recognition Systems Tracker
				</h2>
				<p class="mt-3">
					Browse through our breathing database of all the FRT systems installed in India by different
					authorities.
				</p>
				<div class="flex my-4 pr-12 items-center">
					Hover over the states to dig deeper.
				</div>
			</div>
			{% else %}
			<div class="p-5 md:p-8">
				<h3>We're still digging</h3>
				<p class="max-w-lg mt-3">
					We don't have any records for facial recognition systems in {{ state_name }} yet.
				</p>
				<p class="max-w-lg mt-3">
					We are actively working to expand our repository of information we have on facial recognition in
					India.
					We shall keep posting more case studies and updates, follow us on social media to stay up to date.
				</p>
				<p class="max-w-lg mt-3">
					If you have some information about an FRT system around you that you wish to share with us, feel
					free to
					get in
					touch.
				</p>
				<div class="mt-8 inline-flex flex-col md:flex md:flex-row">
					<a href="/report-frt" class="px-4 mr-4 py-3 hover:bg-orange-600 bg-orange-500 rounded-sm">Report an
						FRT</button>
					</a>
					<a href="/" class="mt-3 md:mt-0 px-4 py-3 hover:bg-teal-blue-800 bg-teal-blue-700 rounded-sm">Back
						to Home</button>
					</a>
				</div>
			</div>
			{% endif %}
		</div>
	</div>
</section>
{% if frts|length %}
<section class="container bg-teal-blue-500 border-l border-r border-b flex flex-wrap">
	<div class="bg-panoptic-blue-500 border-b w-full px-8 py-5 flex justify-between">
		<div class="font-bold">{{ frt_list_title }}</div>
		<p class="text-aqua-blue-500 hidden md:block">Click on the card to learn more</a>
	</div>
	{% for frt in frts %}
	<a href="{{ frt.route }}"
		class="w-full md:w-1/3 lg:w-1/3 p-8 border-r border-b hover:bg-teal-blue-600 hover:text-orange-500">
		<h2>{{ frt.authority }}</h2>
		<div class="mt-3 mb-3 text-white">
			<!-- {%- if frt.district_name -%}
			<p><span class="text-teal-blue-300">District:</span> {{ frt.district_name }}</p>
			{%- endif -%} -->

			{%- if frt.status -%}
			<p><span class="text-teal-blue-300">Status:</span> {{ frt.status }}</p>
			{%- endif -%}

			{%- if frt.purpose -%}
			<p><span class="text-teal-blue-300">Purpose:</span> {{ frt.purpose }}</p>
			{%- endif -%}

		</div>
	</a>
	{% endfor %}
</section>
{% endif %}
{% endblock %}